<template>
  <div class="home">
    <header>
      <h3>宏烨找房</h3>
      <form>
        <!-- <select v-model="selectCurriculums">
          <option v-for="(curriculum, index) in curriculums" :key="index">{{curriculum}}</option>
        </select>|-->

        <p @click="mycity()">
          {{city}}
          <i class="el-icon-caret-bottom"></i>
        </p>

        <!-- v-model="search" -->
        <van-search placeholder="请输入搜索关键词" />
      </form>
    </header>

    <main>
      <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
        <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
          <div class="swiper">
            <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
              <van-swipe-item>
                <img src="../../../images/轮播.jpg" alt />
              </van-swipe-item>
              <van-swipe-item>2</van-swipe-item>
              <van-swipe-item>3</van-swipe-item>
              <van-swipe-item>4</van-swipe-item>
            </van-swipe>
          </div>
          <div class="buttonlist">
            <router-link to="/buyhouse">
              <img src="../../../images/买房.jpg" alt />
              <p>买房</p>
            </router-link>
            <router-link to="/renting">
              <img src="../../../images/租房.jpg" alt />
              <p>租房</p>
            </router-link>
            <router-link to="/wanted">
              <img src="../../../images/求租.jpg" alt />
              <p>求租</p>
            </router-link>
            <router-link to="/asktobuy">
              <img src="../../../images/求购.jpg" alt />
              <p>求购</p>
            </router-link>
            <router-link to="/maproom">
              <img src="../../../images/地图找房.jpg" alt />
              <p>地图找房</p>
            </router-link>
            <router-link to="/information">
              <img src="../../../images/资讯.jpg" alt />
              <p>资讯</p>
            </router-link>
            <router-link to="/housingring">
              <img src="../../../images/楼市圈.jpg" alt />
              <p>楼市圈</p>
            </router-link>
            <router-link to="/broker">
              <img src="../../../images/经纪人.jpg" alt />
              <p>经纪人</p>
            </router-link>
            <router-link to="/Grouplookroom">
              <img src="../../../images/团购看房.jpg" alt />
              <p>团购看房</p>
            </router-link>
            <router-link to="/livelookroom">
              <img src="../../../images/直播看房.jpg" alt />
              <p>直播看房</p>
            </router-link>
          </div>
          <div class="roominformation">
            <p>
              <span>楼市资讯</span>
              <span>更多</span>
            </p>

            <div class="informationlist">
              <li v-for="(v, i) in list2" :key="i">
                <span>Top{{i+1}}</span>
                {{v.title}}
              </li>
            </div>
          </div>

          <div class="hotroom">
            <p>
              <span>热门楼盘</span>
              <span>更多</span>
            </p>
            <div
              class="hotroomlist"
              v-for="(item,index) in hotRoom"
              :key="index"
              @click="houseDetail(item.id)"
            >
              <!-- v-if="item.tit.includes(search)" -->
              <dl>
                <dt>
                  <img :src="item.img" alt />
                </dt>
                <dd>
                  <p>{{item.tit}}</p>
                  <p>{{item.word}}</p>
                  <p>
                    <span>{{item.sum}}万</span>
                    <span>{{item.price}}元 / m</span>
                  </p>
                  <p>
                    <button>{{item.type}}</button>
                    <button>{{item.orientation}}</button>
                  </p>
                </dd>
              </dl>
            </div>
          </div>
          <div class="tworoom">
            <p>
              <span>二手房</span>
              <span>更多</span>
            </p>
            <div
              class="hotroomlist"
              v-for="(item,index) in hotRoom"
              :key="index"
              @click="houseDetail(item.id)"
            >
              <!-- v-if="item.tit.includes(search)" -->
              <dl>
                <dt>
                  <img :src="item.img" alt />
                </dt>
                <dd>
                  <p>{{item.tit}}</p>
                  <p>{{item.word}}</p>
                  <p>
                    <span>{{item.sum}}万</span>
                    <span>{{item.price}}元 / m</span>
                  </p>
                  <p>
                    <button>{{item.type}}</button>
                    <button>{{item.orientation}}</button>
                  </p>
                </dd>
              </dl>
            </div>
          </div>
        </van-list>
      </van-pull-refresh>
    </main>
  </div>
</template>


<script>
import { hotRoom } from "../../../api/index";

export default {
  name: "index",
  data() {
    return {
      city: "",
      // selectCurriculums: "北京",
      // curriculums: ["北京", "上海", "山东"],
      list2: [
        {
          title: "嘻嘻嘻嘻嘻嘻寻寻寻寻寻寻寻寻寻"
        },
        {
          title: "嘻嘻嘻嘻嘻嘻寻寻寻寻寻寻寻寻寻"
        },
        {
          title: "嘻嘻嘻嘻嘻嘻寻寻寻寻寻寻寻寻寻"
        },
        {
          title: "嘻嘻嘻嘻嘻嘻寻寻寻寻寻寻寻寻寻"
        }
      ],
      // search: "",
      hotRoom: [],
      list: [],
      loading: false,
      finished: false,
      refreshing: false
    };
  },

  created() {
    this.hotroom();
    this.city = localStorage.getItem("city") || "北京";
  },

  methods: {
    hotroom() {
      hotRoom().then(res => {
        if (res.data.code === 0) {
          this.$router.push("/login");
          this.$toast(res.data.msg);
        } else {
          this.hotRoom = res.data.data;
        }
      });
    },
    //
    mycity() {
      this.$router.push("/floor");
    },
    //进入详情页
    houseDetail(id) {
      this.$router.push(`/Detail/${id}`);
    },

    //下拉刷新
    onLoad() {
      setTimeout(() => {
        if (this.refreshing) {
          this.list = [];
          this.refreshing = false;
        }

        for (let i = 0; i < 2; i++) {
          this.hotRoom.push(this.hotRoom.length + 1);
        }
        this.loading = false;

        if (this.list.length >= 2) {
          this.finished = true;
        }
      }, 2000);
    },
    onRefresh() {
      // 清空列表数据
      this.finished = false;

      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true;
      this.onLoad();
    }
  }
};
</script>


<style lang="scss" scoped>
.home {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  header {
    width: 100%;
    height: 100px;
    background-color: rgb(70, 128, 236);
    h3 {
      margin: 12px 0 10px 18px;

      color: rgb(238, 238, 238);
    }
    form {
      display: flex;
      align-items: center;
      text-align: center;
      width: 90%;
      height: 36px;
      border-radius: 10px;
      margin: 0 18px;
      background-color: rgb(209, 231, 241);
      color: rgb(158, 158, 158);
      select {
        color: rgb(158, 158, 158);
        border: none;
        background: none;
      }
      .van-search {
        background: none;
        .van-search__content {
          background: none;
        }
      }
    }
  }
  main {
    border-top: 2px solid rgb(182, 238, 149);
    flex: 1;
    overflow-y: scroll;
    .swiper {
      .my-swipe .van-swipe-item {
        color: #fff;
        font-size: 20px;
        line-height: 150px;
        text-align: center;
        background-color: #39a9ed;
        width: 100%;
        height: 160px;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
    .buttonlist {
      width: 100%;
      height: auto;
      display: flex;
      flex-wrap: wrap;
      a {
        width: calc(100% / 5);
        text-align: center;
        margin: 15px 11px;
        width: 50px;
        height: 50px;
        img {
          width: 50px;
          height: 50px;
        }
        p {
          color: #000;
          font-size: 12px;
        }
      }
    }

    .roominformation {
      margin-top: 20px;
      width: 100%;
      height: 280px;
      p {
        width: 100%;
        height: 40px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        span:first-child {
          font-size: 20px;
          font-weight: bold;
          margin-left: 20px;
        }
        span:nth-child(2) {
          font-size: 18px;
          margin-right: 20px;
          color: rgb(151, 149, 149);
        }
      }
      .informationlist {
        width: 90%;
        margin: 10px auto;
        border-bottom: 1px solid rgb(185, 185, 185);
        li {
          margin-left: 24px;
          line-height: 300%;
          span {
            background-color: rgb(253, 101, 101);
          }
        }
      }
    }

    .hotroom {
      width: 100%;
      height: auto;
      p {
        width: 100%;
        height: 40px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        span:first-child {
          font-size: 20px;
          font-weight: bold;
          // margin-left: 20px;
        }
        span:nth-child(2) {
          font-size: 18px;
          margin-right: 20px;
          color: rgb(151, 149, 149);
        }
      }
      .hotroomlist {
        dl {
          width: 100%;
          height: 120px;
          display: flex;
          align-items: center;
          border-bottom: 1px solid rgb(221, 221, 221);
          dt {
            img {
              width: 120px;
              height: 100px;
            }
          }
          dd {
            p {
              height: 23px;
            }
            p:first-child {
              font-size: 14px;
              font-weight: 600;
            }
            p:nth-child(2) {
              font-size: 14px;
            }
            p:nth-child(3) {
              font-size: 14px;
              display: flex;
              justify-content: start;
              span:first-child {
                font-size: 14px;
                color: rgb(255, 196, 0);
              }
              span:nth-child(2) {
                font-size: 14px;
                margin-left: 10px;
              }
            }
          }
        }
      }
    }

    .tworoom {
      // margin-top: 380px;
      width: 100%;
      height: auto;
      p {
        width: 100%;
        height: 40px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        span:first-child {
          font-size: 20px;
          font-weight: bold;
          // margin-left: 20px;
        }
        span:nth-child(2) {
          font-size: 18px;
          margin-right: 20px;
          color: rgb(151, 149, 149);
        }
      }
      .hotroomlist {
        dl {
          width: 100%;
          height: 120px;
          display: flex;
          align-items: center;
          border-bottom: 1px solid rgb(221, 221, 221);
          dt {
            img {
              width: 120px;
              height: 100px;
            }
          }
          dd {
            p {
              height: 23px;
            }
            p:first-child {
              font-size: 14px;
              font-weight: bold;
            }
            p:nth-child(2) {
              font-size: 14px;
            }
            p:nth-child(3) {
              font-size: 14px;
              display: flex;
              justify-content: start;
              span {
                font-size: 14px;
              }
            }
          }
        }
      }
    }
  }
}
</style>